<template>
  <!-- 条件搜索 -->
  <el-form ref="form" :model="searchForm" label-width="80px">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="靶场ID">
          <el-input v-model="searchForm.ContainerId" placeholder="请输入靶场ID" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="入口URL">
          <el-input v-model="searchForm.socket" placeholder="请输入入口URL" />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="fetchContainerList">查询</el-button>
      </el-col>
    </el-row>
  </el-form>

  <!-- 列表展示 -->
  <el-table :data="tableData" stripe border style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="containerId" label="靶场ID" width="120" />
    <el-table-column prop="rangeId" label="镜像Id" width="180" />
<!--    <el-table-column prop="contestId" label="考试ID" width="120" />-->
    <el-table-column prop="socket" width="200" label="入口URL" />
    <el-table-column prop="flagValue" label="flag值" width="80" />
<!--    isFlagMatch-->
    <el-table-column prop="isFlagMatch" label="正误" width="60">
      <template #default="scope">
        <el-tag v-if="scope.row.isFlagMatch" type="success">是</el-tag>
        <el-tag v-else type="danger">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
<!--    <el-table-column prop="updater" label="销毁者" width="80" />-->
    <el-table-column prop="updateTime" label="销毁时间" width="180" align="center" />
    <el-table-column fixed="right" label="操作" min-width="60px">
      <template #default="scope">
        <el-button size="small" type="danger" @click="show(scope.row)">查看</el-button>
<!--        删除-->
        <el-button size="small" type="danger" @click="destroy(scope.row)">销毁</el-button>
<!--        彻底删除-->
        <el-button size="small" type="danger" @click="deleteContainer(scope.row)">彻底销毁</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <Pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :total="total"
      @change="handlePageChange"
  />

  <!-- 弹窗部分：容器详情 -->
  <el-dialog v-model="dialogVisible" title="容器详情" width="50%">
    <el-descriptions :column="2" border label-align="right" align="left">
      <el-descriptions-item label="容器ID">{{ currentContainer.containerId }}</el-descriptions-item>
      <el-descriptions-item label="镜像ID">{{ currentContainer.rangeId }}</el-descriptions-item>
<!--      <el-descriptions-item label="容器类型">{{ currentContainer.containerType }}</el-descriptions-item>-->
<!--      <el-descriptions-item label="难度等级">{{ currentContainer.difficultyId }}</el-descriptions-item>-->
      <el-descriptions-item label="入口URL">{{ currentContainer.socket }}</el-descriptions-item>
<!--      <el-descriptions-item label="用户ID">{{ currentContainer.userId }}</el-descriptions-item>-->
      <el-descriptions-item label="创建时间">{{ currentContainer.createTime }}</el-descriptions-item>
      <el-descriptions-item label="销毁者">{{ currentContainer.updater || '无' }}</el-descriptions-item>
      <el-descriptions-item label="销毁时间">{{ currentContainer.updateTime || '未销毁' }}</el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import Pagination from "@/components/common/pagination/Pagination.vue";
import containerMange from "@/api/Backend/containerMange.ts";

// 分页数据
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

// 搜索表单
const searchForm = reactive({
  ContainerId: '',
  socket: ''
});

// 当前查看的容器信息
const currentContainer = ref({});
// 控制弹窗显示
const dialogVisible = ref(false);

// 查看按钮点击事件
const show = (row) => {
  currentContainer.value = row;
  dialogVisible.value = true;
};

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
};

// 获取列表
const fetchContainerList = async () => {
  try {
    const res = await containerMange.list({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...searchForm
    });
    if (res.code === 200) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  } catch (error) {
    console.error('获取容器列表失败:', error);
    alert('获取容器列表失败');
  }
};

// 分页处理
const handlePageChange = (newPageNum: number, newPageSize: number) => {
  pageNum.value = newPageNum;
  pageSize.value = newPageSize;
  fetchContainerList();
};
// 销毁容器
const destroy = async (row) => {
  try {
    const res = await containerMange.destroy({ containerId: row.containerId });
    if (res.code === 200) {
      alert('销毁成功');
      fetchContainerList(); // 刷新列表
    } else {
      alert(`销毁失败：${res.message}`);
    }
  } catch (error) {
    console.error('销毁容器失败:', error);
    alert('销毁容器失败');
  }
};
// 删除容器
const deleteContainer = async (row: any) => {
  try {
    // 增加确认弹窗防止误操作
    await ElMessageBox.confirm('确定要彻底销毁该容器吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const res = await containerMange.delete(row.containerId)
    if (res.code === 200) {
      ElMessage.success('销毁成功')
      fetchContainerList() // 刷新列表
    } else {
      ElMessage.error(`销毁失败：${res.message}`)
    }
  } catch (error) {
    console.error('销毁容器失败:', error)
    ElMessage.error('销毁失败')
  }
}
// 页面加载初始化数据
import { onMounted } from 'vue';

onMounted(() => {
  fetchContainerList();
});
</script>

<style scoped>
.el-form-item__content {
  display: flex;
  align-items: center;
}

.el-button + .el-button {
  margin-left: 10px;
}

.el-table {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}
</style>
